<template>
  <div id="app">
    <router-view />
    <nav>
      <van-grid :column-num="2" class="vangrid">
        <van-grid-item
          class="vangrid"
          icon="home-o"
          router-link
          text="首页"
          dot
          to="/"
        />
        <!-- <router-link to="/">Home</router-link> -->
        <van-grid-item
          class="vangrid"
          icon="user-circle-o"
          text="关于我"
          router-link
          to="/about"
        />
        <!-- <router-link to="/about">About</router-link> -->
      </van-grid>
    </nav>
  </div>
</template>

<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  width: 100%;
  position: fixed;
  bottom: 0;
  // padding: 30px;
  background: #c2e59c;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to left, #c2e59c, #64b3f4);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to left, #c2e59c, #64b3f4);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.van-grid-item__icon + .van-grid-item__text {
  margin-top: 0;
}
.van-grid-item__content {
  padding: 8px;
  margin: 0;
}
</style>
